<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-n-head="true" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AnyTouch</title>
    <link rel="stylesheet" href="index.css">
    </link>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script> -->
    <script src="../dist/AnyTouch.umd.min.js"></script>

    <script>
        // var vConsole = new VConsole();
    </script>
</head>

<body>
    <main id="app">
        <!-- <header>
            已识别: {{message.type}}
        </header> -->

        <h1>返回数据说明</h1>
        <table>
            <tr>
                <th width="105">键值</th>
                <th width="130">当前值</th>
                <th>说明</th>
            </tr>

            <tr>
                <td>type</td>
                <td>{{message.type}}</td>
                <td>事件名称</td>
            </tr>

            <tr>
                <td>eventType</td>
                <td>{{message.eventType}}</td>
                <td>对应原生事件的type字段</td>
            </tr>

            <tr>
                <td>pointLength</td>
                <td>{{message.pointLength}}</td>
                <td>触点数</td>
            </tr>
            
            <tr>
                <td>maxPointLength</td>
                <td>{{message.maxPointLength}}</td>
                <td>本轮识别周期出现过的最大触点数</td>
            </tr>

            <tr>
                <td>center</td>
                <td>{{message.center}}</td>
                <td>center为单/多点的中心点坐标</td>
            </tr>

            <tr>
                <td>x / y</td>
                <td>{{message.x}} / {{message.y}}</td>
                <td>同centerX / centerY</td>
            </tr>

            <tr>
                <td>velocityX / velocityY</td>
                <td>{{message.velocityX}} / {{message.velocityY}}</td>
                <td>速率</td>
            </tr>

            <tr>
                <td>speedX / speedY</td>
                <td>{{message.speedX}} / {{message.speedY}}</td>
                <td>速度</td>
            </tr>

            <tr>
                <td>distanceX / distanceY</td>
                <td>{{message.distanceX}} / {{message.distanceY}}</td>
                <td>拖拽类手势(pan/rotate/pinch)产生的, 值为当前触点(中心点)对起始触点的距离, 是个标量</td>
            </tr>

            <tr>
                <td>displacementX / displacementY</td>
                <td>{{message.displacementX}} / {{message.displacementY}}</td>
                <td>distanceX / distanceY的向量表示, 向右拖拽x为正整数,向左x为负整数,向上y为负整数,向下y为正整数</td>
            </tr>

            <tr>
                <td>deltaX / deltaY</td>
                <td>{{message.deltaX}} / {{message.deltaY}}</td>
                <td>2次相邻手势之间发生位移变化, 值为向量.</td>
            </tr>

            <tr>
                <td>deltaXYAngle</td>
                <td>{{message.deltaXYAngle}}</td>
                <td>x/y位移变化的夹角</td>
            </tr>


            <tr>
                <td>angle</td>
                <td>{{message.angle}}</td>
                <td>从rotatestart开始累加的旋转角度</td>
            </tr>

            <tr>
                <td>deltaAngle</td>
                <td>{{message.deltaAngle}}</td>
                <td>每次rotatemove触发改变的角度</td>
            </tr>

            <tr>
                <td>scale</td>
                <td>{{message.scale}}</td>
                <td>从pinchstart开始累加的缩放</td>
            </tr>

            <tr>
                <td>deltaScale</td>
                <td>{{message.deltaScale}}</td>
                <td>每次pinchmove触发改变的缩放</td>
            </tr>

            <tr>
                <td>timestamp</td>
                <td>{{message.timestamp}}</td>
                <td>当前时间戳</td>
            </tr>


            <tr>
                <td>direction</td>
                <td>{{message.direction}}</td>
                <td>相对起始触点移动的方向</td>
            </tr>

            <tr>
                <td>lastDirection</td>
                <td>{{message.lastDirection}}</td>
                <td>最近25ms内手势产生的方向</td>
            </tr>

            <tr>
                <td>deltaTime</td>
                <td>{{message.deltaTime}}</td>
                <td>从触点接触屏幕到离开屏幕经过的时间</td>
            </tr>

            <tr>
                <td>isStart</td>
                <td>{{message.isEnd}}</td>
                <td>是否第一次接触屏幕</td>
            </tr>

            <tr>
                <td>isEnd</td>
                <td>{{message.isEnd}}</td>
                <td>是否所有触点都离开了屏幕</td>
            </tr>

            <tr>
                <td>target</td>
                <td>ElementTarget</td>
                <td>绑定事件的元素</td>
            </tr>

            <tr>
                <td>currentTarget</td>
                <td>ElementTarget</td>
                <td>触发事件的元素</td>
            </tr>

            <tr>
                <td>nativeEvent</td>
                <td>MocatchEvent | TouchEvent</td>
                <td>Mouse/Touch事件数据</td>
            </tr>



            <tr style="min-height:60px;">
                <td>points</td>
                <td>{{message.points}}</td>
                <td>触点信息</td>
            </tr>

        </table>


        <!-- 
        <section class="fixed-bottom">
            <a href="?debug">vconsole</a>
            <a href="?">vconsole off</a>
        </section> -->
        <!-- <div class="box" id="box" ref="box">BOX</div> -->

        <div class="circle" id="circle" ref="circle" @animationend="animationend" :class="[activeType]" :style="{
                top:`${y}px`,
                left:`${x}px`,
            transform: `scale(${scale}) rotate(${angle}deg)`
            
        }">{{message.type||activeType}}</div>
        <!-- <p class="text">scale: {{scale}}</p>
        <p class="text">angle: {{angle}}</p> -->
        <!-- <div class="circle2" id="circle2" ref="circle2">123</div> -->
    </main>
    <script src="./index.js"></script>
    <script>
        // let circle = document.getElementById('circle');
        // circle.addEventListener('pan', ev => {
        //     console.log(ev);
        // });
    </script>
</body>

</html>